import { Button, List, Mask, NavBar, Toast } from 'antd-mobile';
import { MoreOutline } from 'antd-mobile-icons';
import React, { Component } from 'react';
import '../style/Set.scss'
import service from '../api';

class Set extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            setVisible: false,
            flag: false,
            value: '',
            oldpass: '',
            newpass: ''
        }
    }

    // 修改密码
    async setpass() {
        // console.log(this.state.oldpass);
        // console.log(this.state.newpass);
        if (this.state.oldpass == '' && this.state.newpass == '') {
            alert('请输入新旧密码')
        } else {
            var res = await service.user.updatePass({ userid: localStorage.getItem('userid'), oldpassword: this.state.oldpass, newpassword:this.state.newpass })
            console.log(res);
            if (res.data.code == 10030) {
                alert('原始密码错误')
            }else{
                Toast.show({ content: '修改成功' })
                this.setState({ flag: false })
            }
        }
    }

    // 提交用户名
    async submit() {
        // console.log(this.state.value);
        if (this.state.value == '') {
            alert('请输入用户名')
        } else {
            var res = await service.user.bindname({ userid: localStorage.getItem('userid'), username: this.state.value })
            console.log(res);
            if (res.data.code == 200) {
                Toast.show({ content: '修改成功' })
                this.setState({ setVisible: false })
            }
        }
    }

    // 退出登录
    del() {
        localStorage.clear()
        this.props.history.push('/login')
    }

    render() {
        return (
            <div className='set'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }} right={<MoreOutline style={{ fontSize: 35 }} />}>设置</NavBar>
                </div>

                <List style={{ 'marginBottom': '50px' }}>
                    <List.Item onClick={() => { this.setState({ setVisible: true }) }}>
                        绑定用户名
                    </List.Item>
                    <List.Item onClick={() => { this.setState({ flag: true }) }}>
                        修改密码
                    </List.Item>
                </List>

                {/* 修改用户名 */}

                {
                    this.state.setVisible == true ?
                        <div className="box">
                            <h2>设置用户名</h2>
                            <input type="text" placeholder='请输入用户名' value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} />
                            <Button style={{ 'marginTop': '20px' }} onClick={() => { this.submit() }} block shape='rounded' color='danger'>
                                更新
                            </Button>
                            <Button onClick={() => this.setState({ setVisible: false })} style={{ 'margin': '20px 0' }} block shape='rounded' color='danger'>
                                退出
                            </Button>
                        </div> : ''
                }

                {/* 修改密码 */}
                {
                    this.state.flag == true ?
                        <div className="pass">
                            <h2 style={{ 'margin': '10px 0' }}>修改密码</h2>
                            <input type="text" placeholder='请输入旧密码' value={this.state.oldpass} onChange={(e) => this.setState({ oldpass: e.target.value })} />
                            <input type="text" placeholder='请输入新密码' value={this.state.newpass} onChange={(e) => this.setState({ newpass: e.target.value })} />
                            <Button style={{ 'marginTop': '20px' }} onClick={() => { this.setpass() }} block shape='rounded' color='danger'>
                                修改密码
                            </Button>
                            <Button onClick={() => this.setState({ flag: false })} style={{ 'margin': '20px 0' }} block shape='rounded' color='danger'>
                                退出
                            </Button>
                        </div> : ''
                }

                <Button onClick={() => { this.del() }} block shape='rounded' color='danger' size='large'>
                    退出登录
                </Button>


            </div>
        );
    }
}

export default Set;